<template>
  <div class="orders-wrap">
    <Table class="table-head">
      <table-column label="产品信息" align="center" />
      <table-column label="单价" align="center" width="200" />
      <table-column label="数量" align="center" width="100" />
      <table-column label="实付款" align="center" width="100" />
      <table-column label="订单状态" align="center" width="100" />
      <table-column label="操作" align="center" width="100" />
    </Table>
    <div class="tables-wrap">
      <div
        class="table-wrap"
        v-for="item in showList"
        :key="item.group_order_id"
      >
        <div class="order-head">
          <div class="left">
            <div class="order-merchant" v-if="item.merchant">
              商家：{{ item.merchant.mer_name }}
            </div>
            <div class="order-number">订单号：{{ item.order_mer_sn }}</div>
          </div>
          <div class="right">
            <div v-if="item.status == 20" class="order-after-sale">
              售后
            </div>
            <div class="order-time">{{ item.create_time }}</div>
          </div>
        </div>
        <Table
          class="order-table"
          :data="item.orderList"
          :border="true"
          :show-header="false"
          :span-method="spanMethod"
        >
          <table-column
            prop="image"
            label="产品信息"
            align="center"
            width="130px"
            class-name="MyOrder-calumn-noOrder"
          >
            <template v-slot="{ row }">
              <div style="display: flex; align-items: center">
                <img
                  :src="row.productInfo.image"
                  alt=""
                  style="
                    max-width: 110px;
                    max-height: 130px;
                  "
                />
              </div>
            </template>
          </table-column>
          <table-column
            prop="name"
            align="center"
            class-name="MyOrder-calumn-noOrder"
          >
            <template v-slot="{ row }">
              <div style="display: flex; align-items: center">
                {{ row.productInfo.store_name }}
              </div>
            </template>
          </table-column>

          <table-column
            prop="price"
            label="单价"
            align="center"
            width="200"
            class-name="MyOrder-calumn-noOrder"
          >
            <template v-slot="{ row }"> ￥{{ row.unit_price || 0 }} </template>
          </table-column>

          <table-column
            prop="count"
            label="数量"
            align="center"
            width="100"
            class-name="MyOrder-calumn-noOrder-left"
          >
            <template v-slot="{ row }"> ×{{ row.total_num }} </template>
          </table-column>

          <table-column prop="total" label="实付款" align="center" width="100">
            <template v-slot="{ row }" :data-id="row">
              ￥{{ item.total_price }}
            </template>
          </table-column>

          <table-column
            prop="status"
            label="订单状态"
            align="center"
            width="100"
          >
            <template>
              <div>{{ item | statusText }}</div>
              <div>
                {{ item.pay_type == 3 ? "线下支付" : "线上支付" }}
              </div>
            </template>
          </table-column>

          <table-column prop="action" label="操作" align="center" width="100">
            <template>
              <div>
                <div
                  v-if="
                    routeInfo.name !== 'purchaseDetails' &&
                      routeInfo.name !== 'ServiceDetails'
                  "
                  class="btnItem"
                  @click.prevent="checkDetails(item.group_order_id)"
                >
                  查看详情
                </div>
                <div v-if="item.is_del != 1 && item.is_cancel != 1">
                  <div
                    class="btnItem btnColor"
                    v-if="item.status == 10"
                    @click.stop="sureOrder(item)"
                  >
                    确认收货
                  </div>
                  <div
                    class="btnItem"
                    v-if="(item.status == 10 || item.status == 15) && !isServer"
                    @click.prevent="toLogistics(item)"
                  >
                    查看物流
                  </div>
                  <div
                    class="btnItem"
                    v-if="item.status == 15"
                    @click.prevent="pushToEvaluation(item)"
                  >
                    去评价
                  </div>
                  <div
                    class="btnItem"
                    v-if="item.status == 0"
                    @click.prevent="cancelOrder(item)"
                  >
                    取消订单
                  </div>
                  <!-- <div
                    class="btnItem"
                    v-if="item.paid == 1 && item.status == 0"
                    @click.prevent="talkOrder(item)"
                  >
                    协商取消
                  </div> -->
                </div>
              </div>
            </template>
          </table-column>
        </Table>
      </div>
    </div>
    <nodata message="暂时没有数据" :status="listStatus"></nodata>
    <!-- 弹窗 -->
    <div class="dialog">
      <!-- 删除订单 -->
      <!-- <m-dialog title="平台提示" :show-dialog.sync="showDialog1">
        <p
          class="text textcenter"
          style="margin-bottom: 50px; font-size: 16px; line-height: 26px"
        >
          确定删除该订单？
        </p>
        <div class="btns" style="display: flex; justify-content: center">
          <m-button
            width="180"
            type="dark"
            @click.native="showDialog1 = false"
            style="margin-right: 10px"
            >取消</m-button
          >
          <m-button width="180" @click="sureDel">确定</m-button>
        </div>
      </m-dialog> -->
      <!-- 取消弹窗/未支付且未发货 -->
      <m-dialog
        :showDialog.sync="showDialog2"
        title="平台提醒"
        :close-on-click-modal="false"
      >
        <template v-slot>
          <p style="margin-bottom: 15px">请填写取消原因</p>
          <m-input type="textarea" v-model="reason" />
          <div
            class="btns mtp30"
            style="display: flex; justify-content: center"
          >
            <m-button
              width="180"
              type="dark"
              @click="showDialog2 = false"
              style="margin-right: 10px"
              >取消</m-button
            >
            <m-button width="180" @click="reasonQuit" :loading="isCanceling"
              >确定</m-button
            >
          </div>
        </template>
      </m-dialog>
      <!--//todo 协商取消弹窗/已支付且未发货 -->
      <m-dialog :showDialog.sync="showDialog3" title="商家联系方式">
        <template v-slot>
          <div class="content">
            <div class="text-item">
              <img
                src="~/assets/images/contact-person.png"
                style="margin-right:10px"
              />
              <span>联系人：狗蛋</span>
            </div>
            <div class="text-item">
              <img
                src="~/assets/images/contact-phone.png"
                style="margin-right:10px"
              />
              <span>联系电话：2315435131324</span>
            </div>
          </div>
          <div class="bottom bottom-btn">
            <m-button @click="showDialog3 = false" class="closeBtn">
              确定
            </m-button>
          </div>
        </template>
      </m-dialog>
      <!-- 确认收货弹窗 -->
      <m-dialog
        :showDialog.sync="showDialog4"
        title="确认收货"
        :close-on-click-modal="false"
      >
        <template v-slot>
          <div class="confirm-dialog-content textBold">
            <Row type="flex" justify="center">
              <Col :span="18" class="flex">
                <Col :span="6">手机号：</Col>
                <Col :span="9">{{ $store.state.userInfo.phone }}</Col>
                <Col :span="9">
                  <m-button
                    width="120"
                    type="bordered"
                    class="yzmBtn"
                    :disabled="sendTime > 0"
                    @click="sendYzm"
                    >{{ content }}</m-button
                  >
                </Col>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col :span="18" class="flex">
                <Col :span="6">验证码：</Col>
                <Col :span="18">
                  <m-input style="width: 100%" v-model.trim="yzm" />
                </Col>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col :span="8" style="margin-top: 40px">
                <m-button width="143" @click="receipt" :loading="isSureing"
                  >确定</m-button
                >
              </Col>
            </Row>
          </div>
        </template>
      </m-dialog>
    </div>
  </div>
</template>

<script>
import MDialog from "@/components/common/m-dialog/MDialog";
import MButton from "@/components/common/m-button/MButton";
import MInput from "@/components/common/m-input/MInput";
import { getPhoneCaptcha, sureOrder, cancelOrder } from "@/request/api";
import { Table, TableColumn, Row, Col } from "element-ui";

export default {
  components: {
    MDialog,
    Table,
    TableColumn,
    MButton,
    MInput,
    Row,
    Col
  },
  props: {
    isServer: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    listStatus: {
      type: Number,
      default: 1
    },
    detailName: {
      type: String,
      default: ""
    }
  },
  created() {
    this.routeInfo = this.$route;
    // setTimeout(() => {
    //   this.pushToEvaluation(this.showList[0])
    // }, 10);;
  },
  filters: {
    statusText(info) {
      let text = "";
      if (info.is_del == 1) {
        text = "订单已删除";
      } else if (info.is_cancel == 1) {
        text = "订单已取消";
      } else {
        text = {
          "-1": "已退款",
          0: "待付款",
          1: "待发货",
          5: "等待商家确认日期中",
          8: "等待商家发送确认文件",
          10: "待收货",
          15: "待评价",
          20: "已完成"
        }[String(info.status)];
      }
      return text;
    }
  },
  watch: {
    list: {
      immediate: true,
      handler(val) {
        val.forEach(listItem => {
          listItem.orderList = listItem.orderList || [];
          listItem.orderList.forEach(item => {
            item.productInfo = {};
            if (item.product && item.product[0]) {
              item.productInfo = item.product[0] || {};
            }
          });
        });
        this.showList = val;
      }
    }
  },
  data() {
    return {
      showDialog: false,
      showList: [],
      routeInfo: {},
      showDialog2: false, //取消
      showDialog3: false, //协商取消
      showDialog4: false, //确认收货
      eventItem: {}, //当前操作的订单
      reason: "", //取消原因
      sendTime: 0, //发送验证码倒计时
      content: "发送验证码",
      yzm: "", //短信验证码
      isSureing: false, //正在确认收货
      isCanceling: false // 正在取消订单
    };
  },
  methods: {
    // 合并单元格
    spanMethod({ column }) {
      const property = column.property;
      const colPropList = ["total", "status", "action"];
      if (colPropList.includes(property)) {
        return {
          colspan: 1,
          rowspan: 999
        };
      }
    },
    // 前往订单详情
    checkDetails(id) {
      this.$router.push({
        name: this.detailName,
        query: {
          id: id
        }
      });
    },
    // 删除订单
    // delOrder(item) {
    //   this.eventItem = item
    //   this.showDialog1 = true
    // },
    // 取消订单
    cancelOrder(item) {
      this.eventItem = item;
      this.showDialog2 = true;
    },
    // 协商取消
    talkOrder(item) {
      this.eventItem = item;
      this.showDialog3 = true;
    },
    // 确认收货
    sureOrder(item) {
      this.yzm = "";
      this.eventItem = item;
      this.showDialog4 = true;
    },
    // 确定删除
    // sureDel() {
    //   console.log(this.eventItem);
    //   this.showDialog1 = false
    // },
    // 确定取消
    async reasonQuit() {
      if (!this.reason) {
        return this.$message.error("请输入取消原因！");
      }
      this.isCanceling = true;
      try {
        await cancelOrder({
          id: this.eventItem.group_order_id,
          reason: this.reason
        });
        this.showDialog2 = false;
        this.$emit("reload");
      } finally {
        this.isCanceling = false;
      }
    },
    // 确定收货
    async receipt() {
      if (!this.yzm) {
        return this.$message.error("请输入验证码！");
      }
      this.isSureing = true;
      try {
        const res = await sureOrder({
          id: this.eventItem.group_order_id,
          phone: this.$store.state.userInfo.phone,
          sms_code: this.yzm
        });
        this.showDialog4 = false;
        this.$emit("reload");
      } finally {
        this.isSureing = false;
      }
    },
    // todo 查看物流
    toLogistics(item) {
      console.log(item);
    },
    // 发送验证码
    sendYzm() {
      let phone = this.$store.state.userInfo.phone;
      this.sendTime = 60;
      getPhoneCaptcha({
        phone: phone,
        type: "order_queren",
        code: "",
        key: ""
      })
        .then(() => {
          this.content = this.sendTime + "s后重新发送";
          this.timer = window.setInterval(() => {
            this.sendTime--;
            this.content = this.sendTime + "s后重新发送";
            if (this.sendTime <= 0) {
              window.clearInterval(this.timer);
              this.content = "重新发送验证码";
            }
          }, 1000);
        })
        .catch(() => {
          this.sendTime = 0;
        });
    },
    // 去评价
    pushToEvaluation(item) {
      this.$router.push({
        path: "/profile/purchase-management/my-order/evaluation",
        query: { id: item.group_order_id }
      });
    }
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  }
};
</script>
<style lang="scss">
.MyOrder-calumn-noOrder {
  border-left: none !important;
  border-right: none !important;
}
.MyOrder-calumn-noOrder-left {
  border-left: none !important;
}
</style>
<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
.btnItem {
  cursor: pointer;
}

.btnItem:hover {
  color: $theme-color-1;
}

.btnItem.btnColor {
  background: $theme-color-1;
  color: #fff;
  width: 78px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
}
.table-wrap {
  margin-bottom: 40px;

  .order-head {
    height: 40px;
    background-color: #f3f4f7;
    color: #666;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .left,
    .right {
      display: flex;
      align-items: center;
    }

    .order-merchant,
    .order-after-sale {
      margin-right: 25px;
    }

    .order-after-sale {
      width: 85px;
      height: 30px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
  }

  /deep/ .el-table__row {
    //height: 80px !important;
  }
}
.orders-wrap {
  margin-top: 30px;

  .table-head {
    background-color: #f3f4f7;
    margin-bottom: 30px;

    /deep/ .el-table__body-wrapper {
      height: 0;
    }

    /deep/ th {
      color: #666;
      background-color: #f3f4f7;
    }
  }

  .table-wrap {
    margin-bottom: 40px;

    .order-head {
      height: 40px;
      background-color: #f3f4f7;
      color: #666;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      font-size: 14px;
      .left,
      .right {
        display: flex;
        align-items: center;
      }

      .order-merchant,
      .order-after-sale {
        margin-right: 25px;
      }

      .order-after-sale {
        width: 85px;
        height: 30px;
        background-color: #fff;
        border-radius: 10px;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }
    }

    /deep/ .el-table__row {
      //height: 80px !important;
    }
  }
}
.text-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.bottom-btn {
  display: flex;
  justify-content: flex-end;
}
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
